<template>
    <div>
        <van-nav-bar left-arrow title="组员互评" @click-left="onClickLeft">
            <template #right>
                <div class="title-link" @click="onClickRight" v-if="isApply">
                    <img src="@/assets/images/icon-edit.png" />
                    <span>申请薪资</span>
                </div>
            </template>
        </van-nav-bar>
        <div class="group-info">
            <span class="group-name">{{ myteam.groupName }}</span>
            <span class="group-money">({{ myteam.employeeNum }}人，薪资包{{ myteam.totalSalary }}，人均{{ myteam.avgSalary }})</span>
        </div>
        <div class="message-warning" v-if="time">
            <p>评价倒计时：</p>
            <van-count-down class="timespace" :time="time" format="DD天HH时mm分ss秒"> </van-count-down>
        </div>
        <div class="evaluation-filter">
            <span>选择月份</span>
            <div class="datePicker" :class="{ selected: showPicker }" @click="openPicker()">
                {{ filterdate.text }}
            </div>
        </div>
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="selectDate" value-key="text" />
        </van-popup>
        <div class="user-list">
            <div class="user-item" v-for="(item, index) in list" :key="index">
                <div class="user-top">
                    <div class="user-avatar">
                        <img :src="item.user.avatar" />
                    </div>
                    <div class="user-info">
                        <div>
                            <h3>
                                {{ item.user.userName }}<span> 工龄 {{ item.user.entryTimeText }}</span>
                            </h3>
                            <span class="right-info">{{ item.timeText }}</span>
                        </div>
                        <div>
                            <p>{{ item.user.opDepartmentPositionName }} | 入职薪资{{ item.user.entrySalary }}</p>
                        </div>
                    </div>
                </div>
                <!-- <div class="evaluation-wish" v-if="item.type === 2">
                    <span>上月薪资：16000.00</span>
                    <span>平均月薪：15000.00</span>
                </div> -->
                <div class="user-wages">
                    <table cellspacing="1">
                        <tr>
                            <th colspan="2">收到<img src="@/assets/images/icon-flower.png" class="icon-image" />：{{ item.flowerNum }}</th>
                            <th colspan="2">收到<img src="@/assets/images/icon-cow.png" class="icon-image" />：{{ item.cowNum }}</th>
                            <th colspan="2">收到<img src="@/assets/images/icon-crown.png" class="icon-image" />：{{ item.crownNum }}</th>
                        </tr>
                        <tr>
                            <th colspan="3">发起群策群力：{{ item.qunlilanchNum }}</th>
                            <th colspan="3">参与群策群力：{{ item.qunlienterNum }}</th>
                        </tr>
                        <tr>
                            <td colspan="6">
                                <p>本月的进步和功劳：</p>
                                <div v-html="item.advantageRemark"></div>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2" class="bgGray">收到<img src="@/assets/images/icon-bom.png" class="icon-image" />：{{ item.bombNum }}</th>
                            <th colspan="2" class="bgGray">收到<img src="@/assets/images/icon-pig.png" class="icon-image" />：{{ item.pigNum }}</th>
                            <th colspan="2" class="bgGray">换组次数：{{ item.teamchangeNum }}</th>
                        </tr>
                        <tr>
                            <td colspan="6">
                                <p>本月的过失和不足：</p>
                                <div v-html="item.shortcomingRemark"></div>
                            </td>
                        </tr>
                        <tr v-if="item.user.id === user.id || (item.user.id !== user.id && item.isAlreadyFirstComment)">
                            <td colspan="6" class="salary-td">
                                <strong>{{ item.month ? parseInt(item.month.split("-")[1]) : "" }}月申请的薪资：</strong
                                ><span class="blue">{{ item.salary }}元</span>
                            </td>
                        </tr>
                        <tr v-if="item.user.id !== user.id && item.isAlreadyFirstComment">
                            <td colspan="6" class="salary-td">
                                <strong>我认为TA该拿的薪资(盲评)：</strong><span class="blue">{{ item.loginUserComment.salary }}元</span>
                            </td>
                        </tr>
                        <tr v-if="item.user.id !== user.id && item.isAlreadySecondComment">
                            <td colspan="6" class="salary-td">
                                <strong>我认为TA该拿的薪资(再评一次)：</strong><span class="blue">{{ item.loginUserComment.repeatSalary }}元</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="user-bottom">
                    <div class="user-bottom-input" v-if="time !== 0 && item.user.id !== user.id && !item.isAlreadyFirstComment">
                        <span>我认为TA该拿的薪资(盲评)：</span>
                        <van-field v-model="item.firstSalary" type="digit" maxlength="6" size="small" class="money-input" placeholder="0.00 元" />
                        <van-button size="small" type="primary" :loading="firstBtnLoading" @click="firstComment(item)">提交</van-button>
                    </div>
                    <div
                        class="user-bottom-input"
                        v-if="time !== 0 && item.user.id !== user.id && item.isAlreadyFirstComment && !item.isAlreadySecondComment"
                    >
                        <span>再评一次：</span>
                        <van-field v-model="item.secondSalary" type="digit" maxlength="6" size="small" class="money-input" placeholder="0.00 元" />
                        <van-button size="small" type="primary" :loading="secondBtnLoading" @click="secondComment(item)">提交</van-button>
                    </div>
                    <router-link
                        v-if="item.user.id === user.id || (item.user.id !== user.id && item.isAlreadyFirstComment) || nowDate !== filterdate.value"
                        class="detail-link"
                        :to="{
                            path: '/salaryDetail',
                            query: { userId: item.user.id, month: item.month, entryTime: item.user.entryTime, entrySalary: item.user.entrySalary },
                        }"
                        >查看详情&gt;&gt;</router-link
                    >
                </div>
            </div>
        </div>
        <van-tabbar v-model="active" class="tabbar" :before-change="changeTabbar">
            <van-tabbar-item @click="toTask()">
                <span>任务大厅</span>
                <template #icon>
                    <img src="@/assets/images/icon1.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>组员薪资</span>
                <template #icon>
                    <img src="@/assets/images/icon2x.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/groupSalary">
                <span>小组奖金</span>
                <template #icon>
                    <img src="@/assets/images/icon3.png" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { Button, Icon, NavBar, Tabbar, TabbarItem, Picker, Popup, CountDown, Field, Toast, Notify, Dialog } from "vant";
import httpRequest from "@/util/httpRequest";
import { useStore } from "vuex";
import util from "@/util/baseUtil";
export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        [CountDown.name]: CountDown,
        [Field.name]: Field,
        [Dialog.name]: Dialog,
    },
    data() {
        return {
            store: useStore(),
            myteam: {},
            user: {},
            list: [],
            time: 0,
            showPicker: false,
            filterdate: {},
            columns: [],
            nowDate: util.DateFormat(new Date(), "yyyy-MM"),
            firstBtnLoading: false,
            secondBtnLoading: false,
            first: {},
            second: {},
            isApply: false,
            active: 1,
        };
    },
    created() {
        httpRequest.get("userInfo", {}).then((res) => {
            this.user = res.data.userInfo;
            httpRequest.post("getTeamSummaryByUserId", { userId: this.user.id }).then((res2) => {
                if (res2.resultCode === "000000") {
                    this.myteam = res2.data;
                    httpRequest.post("selectTeamInnerSelfCommentList", { teamId: this.myteam.id, month: this.filterdate.value }).then((res3) => {
                        if (res3.resultCode === "000000") {
                            this.list = res3.data;
                            if (this.list && this.list.length > 0 && this.list[0]) {
                                this.isApply = this.list[0].user.id === this.user.id ? false : true;
                            } else {
                                this.isApply = true;
                                if (this.list && this.list.length > 0 && !this.list[0]) {
                                    this.list.splice(0, 1);
                                }
                            }
                            this.list.forEach((e) => {
                                e.advantageRemark = e.advantageRemark.replace(/\n/g,'<br />');
                                e.shortcomingRemark = e.shortcomingRemark.replace(/\n/g,'<br />');
                                e.timeText = e.reviewTime ? e.reviewTime.slice(0, 16) : "--";
                                e.user.entryTimeText = this.getEntryTimeText(e.user.entryTime);
                            });
                        } else {
                            Notify({ type: "warning", message: res3.data });
                        }
                    });
                } else {
                    Dialog.alert({
                        message: "你目前还没加入任何小组，暂时无法访问该功能",
                    }).then(() => {
                        this.onClickLeft();
                    });
                }
            });
        });
        httpRequest.post("getMonthList", {}).then((res) => {
            this.columns = res.data.map((e) => {
                // const date = util.DateFormat(new Date(),"yyyy-MM");
                const text = e === this.nowDate ? e.replace("-", "年") + "月(本月)" : e.replace("-", "年") + "月";
                return { value: e, text };
            });
            this.filterdate = this.columns[0];
        });
        httpRequest.post("getRemainDuring", {}).then((res) => {
            this.time = res.data.teamremain === 0 ? 0 : res.data.teamremain * 1000;
        });
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {},
    methods: {
        toReward() {
            Toast("该功能暂未开放");
        },
        getList() {
            httpRequest.post("selectTeamInnerSelfCommentList", { teamId: this.myteam.id, month: this.filterdate.value }).then((res) => {
                this.list = res.data;
                this.list.forEach((e) => {
                    // e.timeText = this.getTimeText(e.reviewTime);
                    e.timeText = e.reviewTime ? e.reviewTime.slice(0, 16) : "--";
                    e.advantageRemark = e.advantageRemark.replace(/\n/g,'<br />');
                    e.shortcomingRemark = e.shortcomingRemark.replace(/\n/g,'<br />');
                    
                    e.user.entryTimeText = this.getEntryTimeText(e.user.entryTime);
                });
            });
        },
        selectDate(value) {
            this.filterdate = value;
            this.showPicker = false;
            this.getList();
        },
        openPicker() {
            this.showPicker = true;
        },
        onClickLeft() {
            const u = navigator.userAgent;
            const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
            const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isAndroid) {
                const NATIVE = window.NATIVE;
                if (NATIVE) {
                    //判断launcher对象是否存在
                    NATIVE.PAGE_CLOSE();
                } else {
                    alert("launcher not found!");
                }
            } else if (isiOS) {
                const KKJSBridge = window.KKJSBridge;
                KKJSBridge.call("EYJSModule", "pageClose", {}, function() {
                    console.log("closePage");
                });
            }
        },
        onClickRight() {
            httpRequest.post("isCanComment", {}).then((res) => {
                if (res.resultCode === "000000") {
                    this.$router.push("/applySalary");
                } else {
                    Toast({
                        message: res.data,
                    });
                }
            });
        },
        getTimeText(time) {
            const now = new Date().getTime();
            const timer = new Date(time).getTime();
            let minutes = (now - timer) / 1000 / 60;
            if (minutes > 60) {
                minutes = minutes / 60;
                return parseInt(minutes + "") + "小时前";
            } else {
                return parseInt(minutes + "") + "分钟前";
            }
        },
        getEntryTimeText(time) {
            const now = new Date().getTime();
            const timer = new Date(time).getTime();
            let month = (now - timer) / 1000 / 60 / 60 / 24 / 30;
            if (month > 12) {
                month = month / 12;
                return parseInt(month + "") + "年";
            } else {
                month = month < 1 ? 1 : month;
                return parseInt(month + "") + "个月";
            }
        },
        firstComment(item) {
            this.first.targetUserId = item.user.id;
            this.first.teamId = item.teamId;
            this.first.salary = item.firstSalary;
            if (!this.first.salary) {
                Notify({ type: "warning", message: "请填写我认为TA该拿的薪资" });
                return;
            }
            this.firstBtnLoading = true;
            httpRequest
                .post("addTeamInnerOtherComment", this.first)
                .then((res) => {
                    if (res.resultCode === "000000") {
                        Toast({ message: "评价成功" });
                        this.getList();
                    } else {
                        Notify({ type: "warning", message: res.data });
                    }
                })
                .finally(() => {
                    this.firstBtnLoading = false;
                });
        },
        secondComment(item) {
            this.second.commentId = item.firstCommentId;
            this.second.repeatSalary = item.secondSalary;
            if (!this.second.repeatSalary) {
                Notify({ type: "warning", message: "请填写我认为TA该拿的薪资" });
                return;
            }
            this.secondBtnLoading = true;
            httpRequest
                .post("addTeamInnerRepeatComment", this.second)
                .then((res) => {
                    if (res.resultCode === "000000") {
                        Toast({ message: "评价成功" });
                        this.getList();
                    } else {
                        Notify({ type: "warning", message: res.data });
                    }
                })
                .finally(() => {
                    this.secondBtnLoading = false;
                });
        },
        toTask() {
            // Toast("该功能暂未开放");
            this.$router.push("/");
        },
        changeTabbar() {
            console.log(1);
            return false;
        },
    },
};
</script>

<style lang="less" scoped>
.title-link {
    display: flex;
    align-items: center;
    img {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    span {
        font-size: 28px;
        color: #288ef4;
        line-height: 1;
    }
}

.evaluation-wish {
    height: 64px;
    line-height: 64px;
    background: #fff3ea;
    border-radius: 8px;
    color: #fe7b07;
    font-size: 26px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    span {
        margin: 0 20px;
    }
}
.message-warning {
    color: #ec615c;
    background: #ffeeec;
    height: 70px;
    line-height: 70px;
    margin: 0;
    display: flex;
    padding: 0 30px;
    justify-content: center;
    p {
        margin: 0;
        font-size: 26px;
    }
    .timespace {
        color: #e02020;
        display: flex;
        align-items: center;
        font-size: 28px;
        margin-left: 15px;
    }
}

.user-list {
    margin-bottom: 140px;
    .user-item {
        margin-top: 20px;
        background: #fff;
        padding: 0px 20px;
        position: relative;
        .seal {
            position: absolute;
            right: 20px;
            top: 10px;
            width: 125px;
        }
        .user-top {
            padding: 34px 0;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            align-items: center;
            .user-avatar {
                width: 80px;
                height: 80px;
                flex-shrink: 0;
                margin-right: 20px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                }
            }
        }

        .user-bottom {
            padding: 20px 0;
            &-input {
                display: flex;
                justify-content: space-between;
                align-items: center;
                span {
                    font-size: 26px;
                    color: #000;
                    white-space: nowrap;
                    flex: 1 0 auto;
                }
                button {
                    width: 120px;
                    flex: 1 0 auto;
                }
                .money-input {
                    border: 1px solid #e8e8e8;
                    border-radius: 8px;
                    flex: 0 1 auto;
                    margin: 0 10px;
                    box-sizing: border-box;
                    padding: 8px 20px;
                }
            }
            .detail-link {
                color: #576b95;
                font-size: 28px;
                margin-top: 20px;
                display: inline-block;
            }
        }
    }
}
</style>
